<template>
  <div class="hr-container">
    <Video v-if="isShowVideo" @close="isShowVideo = false" :cameraIndexCode="cameraIndexCode" :playWndWidth="1000" :playWndHeight="680"></Video>
    <MapView @mapLoad="mapLoad" :center="center" :zoom="zoom"></MapView>
    <div class="bg">
      <HeadBox title="学校疫情"></HeadBox>
      <div class="main">
        <el-col :span="4">
          <ItemWrap style="height: 86vh" title="学校">
            <Part1 @handleClickItem="handleClick" />
          </ItemWrap>
        </el-col>
        <el-col :span="4">
          <ItemWrap style="height: 22vh" title="风险等级">
            <el-row>
              <el-col :span="11" :offset="1" v-for="(item, index) in fxLevel" :key="index" class="level_item">
                <div class="level_bg" :style="{ background: 'url(\'' + item.bg + '\') no-repeat'}" @click="handleClickLevel(item.distance, item.color)">
                  <div class="name" :style="{ color: item.color }">{{ item.label }}</div>
                </div>
              </el-col>
            </el-row>
          </ItemWrap>
          <ItemWrap style="height: 61vh; margin-top: 20px" title="核酸检测点">
            <Echarts1 />
          </ItemWrap>
        </el-col>
        <el-col :span="4" :offset="11">
          <ItemWrap style="height: 41.5vh" title="各街道学校统计">
            <Echarts2 />
          </ItemWrap>
          <ItemWrap style="height: 41.5vh; margin-top: 20px" title="确诊病例">
            <dv-scroll-board :config="config" ref="table1" style="height: calc(100% - 15px)" @click="skipto" />
          </ItemWrap>
        </el-col>
      </div>
    </div>

    <div id="maptools" style="left: 36%">
      <ul class="bar">
        <li @mouseover="handleOver()">
          <i class="icon icon-layer"> </i>
          <div class="menu-drop-wrap" ref="menuDropRef" @mouseout="handleOut()">
            <ul class="menu-list">
              <li v-for="item in mapDropdownList" :key="item.name">
                <el-checkbox v-model="item.isCheck" @change="changeCheckBox($event, item.name)" /><span>{{ item.name }} {{ item.num }}</span>
              </li>
            </ul>
          </div>
        </li>
        <li><i class="icon icon-point"></i></li>
        <li><i class="icon icon-plug" @click="handlePlug(1)"></i></li>
        <li><i class="icon icon-reduce" @click="handlePlug(2)"></i></li>
      </ul>
    </div>

    <info-window v-if="showDetail" :title="detail.name" @close="showDetail = false">
      <info-window-item label="企业名称：" :value="detail.name"></info-window-item>
      <info-window-item label="地址：" :value="detail.address"></info-window-item>
      <info-window-item label="成立时间：" :value="detail.foundDate.substring(0, 10)"></info-window-item>
      <info-window-item label="经营范围：" :value="detail.business"></info-window-item>
    </info-window>
  </div>
</template>

<script>
import MapView from '@/components/map-container/index.vue'
import InfoWindow from '@/components/info-window/index.vue'
import InfoWindowItem from '@/components/info-window/item.vue'
import Video from '@/components/video/index.vue'

import Part1 from './echarts/part1.vue'
import Echarts1 from './echarts/echarts1.vue'
import Echarts2 from './echarts/echarts2.vue'

var timer
export default {
  name: 'human-resources',
  components: {
    MapView,
    Video,
    InfoWindow,
    InfoWindowItem,
    Part1,
    Echarts1,
    Echarts2,
  },
  data() {
    return {
      isShowVideo: false,
      cameraIndexCode: '',

      marklist: [],
      top: 60,
      center: [120.432652, 36.145987],
      zoom: 14, // 地图放大比例
      mapDropdownList: [],
      showDetail: false,
      detail: {},
      //
      config: {
        header: ['地点', '时间'],
        data: [],
        headerHeight: 40,
        headerBGC: '#0f1325', //表头
        oddRowBGC: '#0f1325', //奇数行
        evenRowBGC: '#171c33', //偶数行
        index: true,
        columnWidth: [45, 200],
        align: ['center'],
      },
      // 风险等级
      fxLevel: [ 
        { value: 1, label: '一级', distance: 300, bg: require('../../assets/image/bg_level1.png'), color: '#6095f3' },
        { value: 2, label: '二级', distance: 400, bg: require('../../assets/image/bg_level2.png'), color: '#ffc76d' },
        { value: 3, label: '三级', distance: 500, bg: require('../../assets/image/bg_level3.png'), color: '#ff6a0e' },
        { value: 4, label: '四级', distance: 700, bg: require('../../assets/image/bg_level4.png'), color: '#e0373b' }
      ],
      levelCircle: null,
      schoolId: '',
      jkMarker: [],
      jkMarklist: []
    }
  },
  mounted() {
    this.getCaseData()
  },
  methods: {
    // 初始化地图
    mapLoad(amap) {
      this.map = amap
    },
    // 统计确诊病例
    getCaseData() {
      //获取数据
      this.$get('/hs/map/getCase').then((res) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        let dataList = res.data
        let resultList = []
        dataList.map((v, i) => {
          var item = ['', '']
          let colorCode = ''
          if (i % 2 == 0) {
            colorCode = '<span style="color:#9fe6b8;">'
          } else {
            colorCode = '<span style="color:#67e0e3;">'
          }
          item[0] = `${colorCode}${v.situs}</span>`
          item[1] = `${colorCode}${v.startTime}</span>`
          resultList.push(item)
        })
        this.config.data = resultList
        this.$refs['table1'].updateRows(resultList)
      })
    },
    // 点击学校
    handleClick(val) {
      this.map.clearMap()
      let lat = val.latitude, lng = val.longitude
      this.center = [lng, lat]

      this.map.setCenter([lng, lat]); // 设置地图中心点
      this.map.setZoom(16.5); // 设置地图层级

      // 创建marker点位标记
      var icon = new AMap.Icon({
        // 图标尺寸
        size: new AMap.Size(110, 110),
        // 图标的取图地址
        image: './icon-school.png',
        // 图标所用图片大小
        imageSize: new AMap.Size(60, 60),
        // 图标取图偏移量
        imageOffset: new AMap.Pixel(0, 0),
      })
      var marker = new AMap.Marker({
        position: new AMap.LngLat(lng, lat),
        icon: icon,
        offset: new AMap.Pixel(-30, -55)
      });
      this.map.add(marker);

      // 点击点位查看详情
      marker.on('click', () => { 
        var content = [];
        content.push("<div style='max-width: 300px;color: #ffffff;'><strong>" + val.name + "</strong>");
        content.push("<div style='font-size: 13px; margin-top: 8px'>" + val.location + "</div></div>");
        
        this.infoWindow = new AMap.InfoWindow({
          // isCustom: false, // 是否自定义信息窗体
          content: this.createInfoWindow(content.join("<br/>")), // 信息窗体的内容
          offset: new AMap.Pixel(0, -35),
          closeWhenClickMap: true
        });
          
        this.infoWindow.open(this.map, new AMap.LngLat(val.longitude, val.latitude));
      })

      var circle = new AMap.Circle({
        center: new AMap.LngLat(lng, lat), // 圆心位置
        radius: 50, // 半径 米
        strokeColor: "#f27e7e", //线颜色
        strokeOpacity: 1, // 线透明度
        strokeWeight: 2, // 线粗细度
        fillColor: '#ee2200', // 填充颜色
        fillOpacity: 0.4, // 填充透明度
      })
      this.map.add(circle)

      this.getVillagePoints(val.id) // 获取学校周围小区点位
    },
    // 获取学校周围小区点位
    getVillagePoints(id) {
      this.$get('/coordinateSchool/community/page', {
        page: 1,
        limit: 1000,
        schoolId: id,
      }).then((res) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }

        this.marklist = res.data.list
        this.marklist.map((item) => {
          // 创建marker点位标记
          var icon = new AMap.Icon({
            // 图标尺寸
            size: new AMap.Size(90, 90),
            // 图标的取图地址
            image: './icon-village.png',
            // 图标所用图片大小
            imageSize: new AMap.Size(40, 40),
            // 图标取图偏移量
            imageOffset: new AMap.Pixel(0, 0),
          })
          var marker = new AMap.Marker({
            position: new AMap.LngLat(item.longitude, item.latitude),
            icon: icon,
            offset: new AMap.Pixel(-17, -35),
          })
          this.marklist.push(marker)

          // 点击点位查看详情
          marker.on('click', () => { 
            this.map.setCenter([item.longitude, item.latitude]); // 设置地图中心点

            var content = [];
            content.push("<div style='max-width: 300px;color: #ffffff;'><strong>" + item.name + "</strong>");
            content.push("<div style='font-size: 13px; margin-top: 8px'>" + item.location + "</div></div>");
						
						this.infoWindow = new AMap.InfoWindow({
							// isCustom: false, // 是否自定义信息窗体
							content: this.createInfoWindow(content.join("<br/>")), // 信息窗体的内容
							offset: new AMap.Pixel(0, -35),
							closeWhenClickMap: true
						});
							
						this.infoWindow.open(this.map, new AMap.LngLat(item.longitude, item.latitude));
          })

          var circle = new AMap.Circle({
            center: new AMap.LngLat(item.longitude, item.latitude), // 圆心位置
            radius: 50, // 半径 米
            strokeColor: "#22AEFF", //线颜色
            strokeOpacity: 0.9, // 线透明度
            strokeWeight: 2, // 线粗细度
            fillColor: "#22AEFF", // 填充颜色
            fillOpacity: 0.4 // 填充透明度
          });
          this.map.add(circle);
        })
        this.map.add(this.marklist)
      })
    },
    //构建自定义信息窗体
    createInfoWindow(content) {
      var info = document.createElement("div")
      // 定义中部内容
      var middle = document.createElement("div")
      middle.className = "info-middle"
      middle.style.paddingTop = '10px'
      middle.style.paddingBottom = '10px'
    
      middle.innerHTML = content;
      info.appendChild(middle);
      return info;
    },
    // 获取学校周边监控数据
    getJkPoints(id, distance) {
      this.jkMarklist = []
      this.jkMarker = []
      this.$get('/coordinateSchool/road/monitoring', {
        schoolId: id,
        distance,
        centreLongitude: this.center[0],
        centreLatitude: this.center[1]
      }).then((res) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }

        this.jkMarklist = res.data
        this.jkMarklist.map((item) => {
          // 创建marker点位标记
          var icon = new AMap.Icon({
            // 图标尺寸
            size: new AMap.Size(90, 90),
            // 图标的取图地址
            image: './icon-jk.png',
            // 图标所用图片大小
            imageSize: new AMap.Size(40, 40),
            // 图标取图偏移量
            imageOffset: new AMap.Pixel(0, 0),
          })
          var marker = new AMap.Marker({
            position: new AMap.LngLat(item.longitude, item.latitude),
            icon: icon,
            offset: new AMap.Pixel(-17, -35),
            cameraIndexCode: item.code,
          })

          marker.on('click', this.markerClick)
          this.jkMarker.push(marker)
        })
        this.map.add(this.jkMarker)
      })
    },
    // 点位点击事件，展示视频
    markerClick(e) {
      this.cameraIndexCode = e.target._opts.cameraIndexCode
      this.isShowVideo = true
    },
    // 点击风险等级
    handleClickLevel(distance, color) {
      // 切换等级时，移除上次的Circle覆盖物
      if (this.levelCircle !== null) {
        this.map.remove(this.levelCircle)
        this.map.remove(this.jkMarker)
      }
      this.getJkPoints(this.schoolId, distance) //  获取学校周围监控点位

      this.map.setZoom(16.5); // 设置地图层级
      this.levelCircle = new AMap.Circle({
        center: this.center, // 圆心位置
        radius: distance, // 半径 米
        strokeColor: color, //线颜色
        strokeOpacity: 0.7, // 线透明度
        strokeWeight: 2, // 线粗细度
        fillColor: color, // 填充颜色
        fillOpacity: 0.2, // 填充透明度
      })
      this.map.add(this.levelCircle)
    },
    // 鼠标移入
    handleOver() {
      this.$refs.menuDropRef.style.display = 'block'
    },
    // 鼠标移出
    handleOut() {
      this.$refs.menuDropRef.style.display = 'none'
    },
    // 鼠标放大缩小
    handlePlug(type) {
      if (type === 1) {
        this.map.zoomIn()
      } else {
        this.map.zoomOut()
      }
    },
    // 监听复选框
    changeCheckBox(val) {
      // let arr1 = [], arr2 = []
      // arr1 = this.mapDropdownList.filter((tag) => tag.isCheck)
      // arr2 = arr1.map((i) => {
      //   return `${i.typeId}`
      // })
      // this.getPoints(arr2.join(','));
    },
    // 确诊病例点击行跳转轨迹地图
    skipto() {
      this.$router.push({
        path: '/yxgj-map',
      })
    },
  },
}
</script>

<style lang="less" scoped>
.bg {
  // background-color: #03112B;
  background: url(../../assets/image/bg.png);
  background-size: 100% 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none;
  z-index: 100;
}
.main {
  display: flex;
  padding: 90px 14px 0;
  justify-content: space-between;
  height: 80vh;
}

#maptools {
  .menu-drop-wrap {
    height: auto;
  }
  .icon-layer {
    background: url('../../assets/image/icon/icon1.png') top no-repeat;
  }
  .icon-point {
    background: url('../../assets/image/icon/icon2.png') top no-repeat;
  }
  .icon-plug {
    background: url('../../assets/image/icon/icon3.png') top no-repeat;
  }
  .icon-reduce {
    background: url('../../assets/image/icon/icon4.png') top no-repeat;
  }
}

.level_item {
  :deep(.border-box-content) {
    box-sizing: border-box;
    padding: 6px 10px 0px;
    pointer-events: auto;
  }
  height: 48px;
  margin-top: 10px;
  .level_bg {
    cursor: pointer;
    pointer-events: auto;

    .name {
      color: #c0c0c0;
      font-size: 18px;
      line-height: 48px;
    }
  }
  
}
</style>
